<template>
	<view class="vip-content">
		<u-toast ref="uToast"></u-toast>
		<view class="title">
			<view>我的商品统计</view>
		</view>
		<u-line></u-line>
		<u-scroll-list indicatorActiveColor="#9dae8a">
			<view class="btns">
				<view class="btns-item" v-for="item in countList" :key="item.id">
					<!-- <u-count-to color="#333" :start-val="0" :end-val="item.count" :duration="1000"></u-count-to> -->
					<view class="num">{{ item.count }}</view>
					{{ item.name }}
				</view>
			</view>
		</u-scroll-list>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.getEveryTypeGoodsCount();
		},
		data() {
			return {
				countList: []
			}
		},
		methods: {
			async getEveryTypeGoodsCount() {
				const res = await this.$api.goodsManage.findEveryTypeGoodsCount();
				if(res.code == 200) this.countList = res.data;
				else this.$toast.error(this,res.message)
			}
		}
	}
</script>
<style lang="scss">
	.vip-content {
		padding: 0 $spacing-small;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			letter-spacing: 1px;
			padding: $spacing-base 0;

			.allOrder {
				display: flex;
			}
		}

		.btns {
			display: flex;
			padding-top: $spacing-base;

			.btns-item {
				height: 92rpx;
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				font-size: $uni-font-size-base;

				// margin-right: $spacing-large;
				.num {
					font-size: $uni-font-size-superlg;
					font-weight: bold;
				}
			}
		}
	}
</style>